<template>
  <div class="flex flex-col h-full relative">
    <!--    <div class="h-full">-->
    <div class="flex-bc w-full relative">
      <div class="flex gap-[11px] items-center relative box-title">
        <div class="title leading-[22px] box-title-text">{{ isNullOrEmpty(title) }}</div>
        <img class="box-title-img" :src="getDataImg('boxheadbg')" v-if="getDataImg('boxheadbg')" />
      
      </div>
      <div class="absolute right-[0px] ">
        <slot name="title-right" class="">
        </slot>
      </div>
    </div>
    <div class="pt-[0px] w-full h-[12px] relative" v-if="getDataImg('boxheadb')">
      <img class="w-full h-[12px]" lazy :src="getDataImg('boxheadb')" /> 
    </div>
    <div class="box flex-1 place-content-center">
      <slot></slot>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { isNullOrEmpty } from '@/utils/functions'
import { getDataImg } from "@/utils/data-themset"
// import data1 from '@/assets/screenimg/data1.png'
// import data2 from '@/assets/screenimg/data2.png'

import { useDataDashboardThemeStoreHook } from '@/store/modules/data-dashboard-theme';

const boardThem = useDataDashboardThemeStoreHook().getDataDashboardThem()
console.log("boardThem",boardThem);

const props = defineProps({
  title: {
    type: String,
    default: () => 'title'
  }
})

</script>
<style lang="scss" scoped></style>
